<%--
  Created by IntelliJ IDEA.
  User: zhangkeke
  Date: 2022/10/11
  Time: 20:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title></title>
    <script src="${pageContext.request.contextPath}/jcript/jquery-1.7.2.js"></script>
    <script>
        $(function (){
            /*$("#select").change(function (){
                var select = $("#select").val()
                $.ajax({
                    url:"/query",
                    data:{id_card:select},
                    dataType:"json",
                    success:function (data){
                        $("#inp1").val("该卡里还有余额："+data+"元")
                    }

                })
            })*/
            $("#select").change(function (){
                var select = $("#select").val()
                $.ajax({
                    url:"/query",
                    data:{id_card:select},
                    dataType:"json",
                    success:function (data){
                        $("#select").append("")
                        $("#inp1").val("该卡里还有余额："+data+"元")
                    }

                })
            })
            $("#code_img").click(function (){
                this.src="http://localhost:8087/kaptcha.jpg"
            })

            $("#btn").click(function (){
                var money = $("#inp2").val()
                var code = $("#inp3").val();
                var select = $("#select").val()
                var payment_pwd = $("#inp4").val()
                $.ajax({
                    url: "/rechargingMoney",
                    data: {balance:money,code:code,id_card: select,payment_pwd:payment_pwd},
                    dataType: "json",
                    success:function (data){
                        if(data==1){
                            $("#sp").text("充值成功")
                        }else if(data==0){
                            $("#sp").text("充值失败，支付密码输入错误")
                        }
                        else {
                            $("#sp").text("充值失败，原因是验证码或者充值金额小于等于0或者输入的充值金额大于银行里的余额")
                        }
                    }
                })
            })
                $("span").css({"display":"inline-block","width":"150px","text-align":"right"})

        })
    </script>
</head>
<body>
<div style="position: relative;left: 450px;top: 150px">
    <h3>我的账户</h3>
    <span>选择扣款卡号：</span>
    <select id="select">
        <option selected>请选择卡</option>
        <c:forEach items="${account}" var="card">
            <option value="${card.id_card}">${card.id_card}</option>
        </c:forEach>
    </select>
    <input id="inp1" type="text" style="color: red;font-size: xx-small;width: 240px"><br>
    <span>输入充值金额：￥</span>
    <input type="text" name="money" id="inp2"><span style="font-size: xx-small;color: grey">充值金额应该大于0</span><br>

    <span>验证码:</span>
    <input type="text" id="inp3" name="code"><img  src="http://localhost:8087/kaptcha.jpg" id="code_img"><br>

    <span>支付密码:</span>
    <input type="password" placeholder="请输入支付密码" id="inp4" name="payment_pwd"><br>
    <span>确定充值:</span>
    <button id="btn">确定充值</button><span id="sp" style="color: red;font-size: large" ></span>
    <a href="/pages/userMenu.jsp">返回首页</a>
</div>


</body>
</html>
